<template>
	<u-popup class="pay-password-wrapper" v-model="show" mode="bottom">
		<div class="tip-money">
			<div class="title">{{title}}</div>
			<div class="password-wrapper">
				<div class="item">
					<span class="text" v-if="password[0]!==undefined"></span>
				</div>
				<div class="item">
					<span class="text" v-if="password[1]!==undefined"></span>
				</div>
				<div class="item">
					<span class="text" v-if="password[2]!==undefined"></span>
				</div>
				<div class="item">
					<span class="text" v-if="password[3]!==undefined"></span>
				</div>
				<div class="item">
					<span class="text" v-if="password[4]!==undefined"></span>
				</div>
				<div class="item">
					<span class="text" v-if="password[5]!==undefined"></span>
				</div>
			</div>
		</div>
		<div class="jsq-wrapper">
			<div class="flex">
				<div class="box one">
					<div class="inner" @click="operate(1)">1</div>
				</div>
				<div class="box two">
					<div class="inner" @click="operate(2)">2</div>
				</div>
				<div class="box three">
					<div class="inner" @click="operate(3)">3</div>
				</div>
			</div>
			<div class="flex">
				<div class="box four">
					<div class="inner" @click="operate(4)">4</div>
				</div>
				<div class="box five">
					<div class="inner" @click="operate(5)">5</div>
				</div>
				<div class="box six">
					<div class="inner" @click="operate(6)">6</div>
				</div>
			</div>
			<div class="flex">
				<div class="box seven">
					<div class="inner" @click="operate(7)">7</div>
				</div>
				<div class="box eight">
					<div class="inner" @click="operate(8)">8</div>
				</div>
				<div class="box nine">
					<div class="inner" @click="operate(9)">9</div>
				</div>
			</div>
			<div class="flex">
				<div class="box empty">
					<div class="inner"></div>
				</div>
				<div class="box zero">
					<div class="inner" @click="operate(0)">0</div>
				</div>
				<div class="box del">
					<div class="inner" @click="operate('del')">删除</div>
				</div>
			</div>
		</div>
	</u-popup>
</template>

<script>
	import storage from "@/utils/storage.js"
	let windowWidth = 0
	import {
		getRegionsById
	} from "@/api/common.js";
	export default {
		name: "pay-password",
		props: {
			type: {
				default: '',
				type: String
			},
			title: {
				default: '请输入支付密码',
				type: String
			}
		},
		data() {
			return {
				show: false, // 显示或者隐藏弹出层
				password: []
			};
		},
		onLoad() {
			this.showPopup()
		},
		methods: {
			/**
			 * 显示选择器
			 */
			showPopup() {
				let userinfo = storage.getUserInfo()
				if (userinfo.noSecret) {
					uni.showToast({
						icon: "loading",
						title: '免密支付...'
					})
					this.$emit("passwordFinish", '')
				} else {
					this.show = true;
				}
			},

			/**
			 * 关闭选择器
			 */
			hide() {
				this.password = []
				this.show = false;
			},
			/**
			 * 输入密码操作
			 * */
			operate(text) {
				if (text == 'del') {
					if (this.password.length != 0) {
						this.password.pop()
					}
				} else {
					if (this.password.length < 6) {
						this.password.push(text)
						if (this.password.length == 6) {
							this.$emit("passwordFinish", this.password.join(''))
							if (this.type !== 'password') {
								uni.showToast({
									icon: "loading",
									title: ' '
								})
							}
							setTimeout(() => {
								uni.hideToast()
								this.hide()
							}, 300)
						}
					}
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.pay-password-wrapper {
		.tip-money {
			margin: 0 auto;
			padding: 24upx;
			width: 500upx;
			background-color: #ffffff;
			margin-bottom: 100upx;
			border-radius: 8upx;

			.title {
				text-align: center;
				font-size: 26upx;
				font-weight: bold;
				margin: 24upx 0;
			}

			.money {
				text-align: center;
				font-weight: bold;

				.icon {
					font-size: 32upx;
				}

				.text {
					font-size: 44upx;
				}
			}

			.method {
				border-top: 2upx solid #f1f1f1;
				margin: 24upx;
				padding: 32upx 0;
				font-size: 24upx;
			}

			.password-wrapper {
				margin-top: 24upx;
				display: flex;
				justify-content: center;

				.item {
					margin: 24upx;
					width: 60upx;
					height: 60upx;
					background-color: #dddddd;
					border-radius: 8upx;
					margin: 0 8upx;
					display: flex;
					justify-content: center;
					align-items: center;

					.text {
						width: 16upx;
						height: 16upx;
						background-color: #222222;
						border-radius: 16upx;
					}
				}
			}
		}

		.jsq-wrapper {
			background-color: #efefef;

			.flex {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.box {
				padding: 1upx;
				flex: 1;
				height: 88upx;

				box-sizing: border-box;

				.inner {
					background-color: #fff;
					height: 100%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 32upx;
				}

				&.del,
				&.empty {
					.inner {
						background-color: #ffffff00;
					}
				}
			}
		}
	}
</style>
